<template>
      <Header></Header>
      <div class="bigmiddiv navrumb">
            <el-breadcrumb>
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item class="blue">
                        <span class="blue">区域数量占比</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
      </div>
      <main class="mincon">
            <div class="bigmiddiv bgwhite">
                  <section class="rowSearch">
                        <span class="gray">名称</span>

                        <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                              <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                        </el-select>
                  </section>
                  <section class="rowSearch">
                        <span class="gray">品牌</span>

                        <el-select v-model="value" placeholder="Select" size="large" style="width: 400px">
                              <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                        </el-select>
                  </section>
                  <section class="datecon  flexbewteen rowSearch">
                        <div>
                              <span class="gray">年份</span>
                              <span @click="changIndex(index)" class="itemspan" :class="[index == i ? 'active' : '']"
                                    v-for="(item, index) in dataArry" :key="item.id">
                                    {{ item.text }}

                              </span>
                              <span class="zdytit">自定</span>

                              <el-date-picker v-model="zdydate" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD">
                              </el-date-picker>
                        </div>
                        <div class="blue flex">
                              <el-icon>
                                    <Delete />
                              </el-icon>
                              &nbsp; 清空
                        </div>

                  </section>
                  <section class="rowSearch">
                        <span class="gray">更多筛选</span>

                        <el-cascader v-model="valueAddress" :options="optionsAddress" @change="handleChange" />
                  </section>
            </div>

            <div class="bigmiddiv bgwhite">

            
                  <div>
                        <div class="border_left_title">区域价格对比图</div>
                        <section>
                              <div ref="chart" class="echartb"></div>
                              <div class="center gray">
                                   <span>最高价</span>
                                   <span>最低价</span>
                                   <span>平均价</span>
                              </div>
                        </section>
                        <section>
                              <Nodata></Nodata>
                        </section>
                  </div>
            </div>



      </main>
      <Footer></Footer>
</template>
<script setup>
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import Nodata from '@/components/Nodata.vue';
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
const value = ref('Option1')

const options = [
      {
            value: 'Option1',
            label: '1as',
      },
      {
            value: 'Option2',
            label: 'Option2',
      },

]

// 日期切换
const i = ref(0)
const dataArry = ref([
      {
            id: 0,
            text: "全部"
      },
      {
            id: 1,
            text: "最近1年"
      },
      {
            id: 2,
            text: "最近3年"
      },
      {
            id: 3,
            text: "最近5年"
      }
])
const changIndex = (index) => {
      i.value = index
}
// 开始结束时间
const zdydate = ref("")


// 百度echarts的展示
const chart = ref(null)
onMounted(() => {


      QujgdbEcharts()//品牌金额占比
})
const QujgdbEcharts = () => {
      console.log(chart);


      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(chart.value);

      // 绘制图表
      myChart.setOption( {
            title: {
                  subtext: '钢铁价格',
                  left: 'center',
                  top: 'auto', // 或者使用具体的像素值，例如 '50%'
                  bottom: '0'  // 设置为0，使其在底部
            },
            
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
});
}


const valueAddress=ref("disciplines")
// 选择省市
const optionsAddress = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
       
      },
      {
        value: 'navigation',
        label: 'Navigation',
        
      },
    ],
  },
  
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]


</script>
<style scoped lang="scss">
.gray {
      margin-right: 20px;
}

.rowSearch{
      margin-top: 16px;
}
.datecon {
      margin-top: 16px;

      .itemspan {
            border: 1px solid transparent;
            border-radius: 4px;
            padding: 3px 5px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 10px;
      }

      .active {
            color: #3873FF;
            border: 1px solid #3873FF;
      }

      .zdytit {
            margin-right: 20px;
      }
}

.leftcon {
      flex: 1;
}

.rightcon {
      flex: 1;
      margin-left: 20px;

      .table {
            border: 1px solid #f3f3f3;
            border-collapse: collapse;
            width: 100%;
            line-height: 2;
            text-align: center;

            thead {
                  background: #F5F6FA;

                  th {
                        font-weight: bold;
                  }
            }

            th,
            td {
                  border: 1px solid #f3f3f3;
            }
      }

}

.echartb {
      width: 100%;
      height: 595px;
      margin: 0 auto;
}
</style>